<template>
<!--全局总线通信方式-->
  <div id="app">
    <!--兄弟组件之间不能直接通信，如果需要让对应的兄弟组件通信，可以使用全局组件通信方式及逆行通信-->
<!--    案例，学生需要获取到老师的姓名，老师需要获取到学生的姓名，方式一使用全局总线进行通信
  通信的原则就是：使用 Vue.prototype.$bus=this 绑定全局组件
  谁要发送数据，就在谁的内部调用this.$bus.$emit发送数据
  谁接收数据，就在谁的内部调用this.$bus.$on绑定函数和回调方法
-->
<!--插槽语法，标签内部写东西，但是对应对应的组件内部，组件不知道把对应的元素放到哪里，
  插槽就是对应的解决方案,插槽可以指定对应组件内部定义的元素放在什么地方
-->
    <TeacherView>
      <p v-for="(subject,index) in subjects" :key="index" >教的科目是:{{ subject }}</p>
    </TeacherView>
    <StudentView>
      <!--命名插槽,这里展示对应的学生学习的科目-->
      <div v-for="(subject,index) in subjects" :key="index" slot="test">
        <span>我是学生，我学的科目是{{ subject }}</span>
      </div>
    </StudentView>
    <hr>
    <!--作用域插槽的使用，类似于props，主要的应用场景是父组件需要传递数据子组件-->
        <SkillView>
          <!--这个scope没什么太大作用，起到一个占位的作用-->
          <template scope="lyp">
            <span v-for="(skill,index) in lyp.skills" :key="index">{{ skill }}</span>
          </template>
        </SkillView>
  </div>
</template>
<script>
import SkillView from './components/SkillView.vue';
import StudentView from './components/StudentView.vue';
import TeacherView from './components/TeacherView.vue';
export default {
  name: 'App',
  data(){
    return{
      subjects:['java程序设计','软件设计模式','移动开发'],
      
    }
  },
  components: {
    TeacherView,
    StudentView,
    SkillView,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
body{
  margin: 0;
  padding: 0;
}
</style>
